<template>
  <transition>
    <div ref="dragIcon" class="dragIcon" @touchstart.stop="handleTouchStart" @touchmove.prevent.stop="handleTouchMove($event)" @touchend.stop="handleTouchEnd"
      :style="{left: left + 'px',top: top + 'px',width: itemWidth + 'px',height: itemHeight + 'px'}" v-if="isShow">
      <slot></slot>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'fixed-ball',
  props: {
    itemWidth: {
      type: Number,
      default: 40
    },
    itemHeight: {
      type: Number,
      default: 40
    },
    hideWhenBodyScroll: {
      type: Boolean,
      default: false
    },
    leftPos: {
      type: Number,
      default: -1
    },
    rightPos: {
      type: Number,
      default: -1
    },
    topPos: {
      type: Number,
      default: -1
    },
    bottomPos: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      left: 0,
      top: 0,
      startToMove: false,
      isShow: true,
      timer: null,
      currentTop: null,
      clientW: document.documentElement.clientWidth, //视口宽
      clientH: document.documentElement.clientHeight //视口高
    }
  },
  created() {
    this.initPosition()
  },
  mounted() {
    this.bindScrollEvent()
  },
  beforeDestroy() {
    // 记得销毁一些全局的的事件
    this.removeScrollEvent()
  },
  methods: {
    initPosition() {
      this.left =
        this.leftPos > -1
          ? this.leftPos
          : this.rightPos > -1
          ? this.clientW - this.itemWidth - this.rightPos
          : this.clientW - this.itemWidth - 30
      this.top =
        this.topPos > -1
          ? this.topPos
          : this.bottomPos > -1
          ? this.clientH - this.bottomPos - this.itemHeight
          : this.clientH / 2 - this.itemHeight / 2
    },
    handleTouchStart() {
      this.startToMove = true
      this.$refs.dragIcon.style.transition = 'none'
    },
    handleTouchMove(e) {
      const clientX = e.targetTouches[0].clientX //手指相对视口的x
      const clientY = e.targetTouches[0].clientY //手指相对视口的y
      const isInScreen =
        clientX <= this.clientW &&
        clientX >= 0 &&
        clientY <= this.clientH &&
        clientY >= 0
      if (this.startToMove && e.targetTouches.length === 1) {
        if (isInScreen) {
          this.left = clientX - this.itemWidth / 2
          this.top = clientY - this.itemHeight / 2
        }
      }
    },
    handleTouchEnd() {
      // if (this.left < this.clientW / 2) {
      //   this.left = 30 //不让贴边 所以设置30没设置0
      //   this.handleIconY()
      // } else {
      //   this.left = this.clientW - this.itemWidth - 30 //不让贴边 所以减30
      //   this.handleIconY()
      // }
      if (this.left < 0) {
        this.left = 0
      }
      if (this.top < 0) {
        this.top = 0
      }
      // console.log(this.itemWidth)
      // console.log(this.left)
      // console.log(this.clientW)
      if (this.itemWidth + this.left > this.clientW) {
        this.left = this.clientW - this.itemWidth
      }
      if (this.itemHeight + this.top > this.clientH) {
        this.top = this.clientH - this.itemHeight
      }

      this.$refs.dragIcon.style.transition = 'all .3s'
    },
    // handleIconY() {
    //   if (this.top < 0) {
    //     this.top = 30 //不上帖上边所以设置为30 没设置0
    //   } else if (this.top + this.itemHeight > this.clientH) {
    //     this.top = this.clientH - this.itemHeight - 30 //不让帖下边所以减30
    //   }
    // },
    bindScrollEvent() {
      window.addEventListener('scroll', this.handleScrollStart)
    },
    removeScrollEvent() {
      window.removeEventListener('scroll', this.handleScrollStart)
    },
    handleScrollStart() {
      this.isShow = !this.hideWhenBodyScroll
      this.timer && clearTimeout(this.timer)
      this.timer = setTimeout(() => {
        this.handleScrollEnd()
      }, 300)
      this.currentTop =
        document.documentElement.scrollTop || document.body.scrollTop
    },
    handleScrollEnd() {
      this.scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop
      // 判断是否停止滚动的条件
      if (this.scrollTop == this.currentTop) {
        this.isShow = true
      }
    }
  }
}
</script>

<style scoped lang="less">
.dragIcon {
  position: fixed;
  // width: 40px;
  // height: 40px;
  border-radius: 50%;
  // background-color: orange;
  // line-height: 40px;
  // text-align: center;
  // color: #fff;
}
.v-enter {
  opacity: 1;
}
.v-leave-to {
  opacity: 0;
}
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s;
}
</style>